<!-- 首页 -->
<template>
	<view class="container">
		
		<view class="tabs">
			<view class="uni-tab-item-title uni-tab-item-title-active" >外呼订单</view>
		</view>
		
		<view>
			<view class="call_search">
				<u-form :model="baseFormData" ref="uForm" :label-style="{fontSize:'30rpx'}">
				
					<u-form-item label="" prop="phone">
						<text class="label_text">号码:</text>
						<view style="width:33%;">
							<u-input type="text" placeholder='' v-model="baseFormData.phone" :border="true" style="background-color: #fff;"></u-input>
						</view>
						
						<text class="label_text">状态:</text>
						<view style="width:28%;">
							<u-input v-model="baseFormData.statusName" type="select" placeholder='' :border="true"
								@click="eventScaleShow = true" style="background-color: #fff;" />
							<u-select :list="statusRange" value-name="value" label-name="text"
								v-model="eventScaleShow" @confirm="eventScaleCallback"></u-select>
						</view>
						
						<view style="width:10%;overflow:hidden;margin-left:3%;">
							<u-button @click="handleSearchCallOrder()" class="submitBtn"  :custom-style="btnStyle" type="primary" ><uni-icons type="search" color="#fff" size="22"></uni-icons></u-button>
						</view>
					</u-form-item>
				
				</u-form>
				
			</view>
			
			<view class="call_log_list" ref="call_log_list">
				<view :class="currentDeleteIndex == it.id ? 'call_log_item_del':'call_log_item'" :ref="'box_center_' + index" v-for="(it,index) in orderList" :data-id="it.id" :data-index="index" :key="index" @click="handleViewTask(it)" >
					
					<!-- <liu-swipe-action :index="index" :btnList="[]"> -->
						
						<view class="call_log_info">
							<text class="phone_number">{{it.contact ? (it.contact + " ("+it.phone+")" ) : it.phone }}</text>
							
							<view v-for="(item,indexs) in it.product_data" :key="indexs">
								<view class="phone_time"><span>产品:{{item.product_title}}</span> <span style="margin-left:20rpx;">数量:{{item.num}}</span><span style="margin-left:20rpx;">金额:{{item.all_price}}</span></view>
							</view>
							
							<view class="phone_time"><text>时间：{{it.create_time}}</text></view>
						</view>
						
						<view v-if="it.order_status == '0'" class="call_log_time">已下单</view>
						<view v-if="it.order_status == '1'" class="call_log_time">发货中</view>
						<view v-if="it.order_status == '3'" class="call_log_time">已签收</view>
					<!-- </liu-swipe-action> -->
				</view>
			</view>
			
			<view style="width:100%;height:150rpx;float:left;clear:both;"></view>
		</view>
		
		<!-- 显示订单详情 -->
		<!-- <view style="position: fixed;top:300rpx;z-index:1000;width:96%;margin-left:2%;height:80%;" v-show="isShowDetail"> -->
		<CallOrder :isShowDetail="isShowDetail" :currentData="taskForm" @changeOrderList="changeOrderList" @closeCallOrder="closeCallOrder" popType='order' :styleData="'height:70%;margin-top:160rpx;position:fixed;top:0rpx;z-index=10000;'" />
		<!-- </view> -->

		<u-toast ref="uToastOrder" />
	</view>
</template>

<script>
	// 通话类型,1呼入,2呼出,3未呼通
	
	import {
		getSeatCallOrderListPro,
	} from "@/api/task.js";
	
	import {
		mapGetters,mapState
	} from "vuex";
	
	import CallOrder from "../components/callOrder.vue";
	
	let that;

	export default {
		data() {
			return {
				duration: 1,

				orderList:[],
				keyword:'',
				pageSize:10,//一次取多少条
				currentPage:0,//当前页数
				
				currentDeleteIndex:0,
				
				baseFormData:{
					phone:'',
					order_status:'',
					statusName:''
				},
				
				statusRange: [
					{
						value: '',
						text: "全部"
					},
					{
						value: 1,
						text: "失效"
					},
					{
						value: 3,
						text: "提醒"
					},
					{
						value: 2,
						text: "完结"
					}
				],
				
				statusDatas: [
					{
						text: '提醒',
						value:3
					},
					{
						text: '完结',
						value:2
					}
				],
				
				inputStyle:{
					fontSize:'30rpx',
					lineHeight:'50rpx',
					height:'50rpx',
                    backgroundColor:'#fff',
                    padding:'0px 0px'
				},
				
				btnStyle: {
					border: 'none',
					borderRadius: '20rpx',
					color: '#fff',
					height:'70rpx',
					padding:'20rpx 10rpx',
					margin:'0rpx'
				},
				
				btnFormStyle: {
					border: 'none',
					borderRadius: '10rpx',
					color: '#fff',
					height:'70rpx',
					padding:'20rpx 30rpx',
					margin:'0rpx',
					float:'right',
					marginLeft:'15rpx'
				},
				
				eventScaleShow: false,
				
				isShowDetail:false,
				
				taskForm:{
					name:'',
					phone_number:'',
					status:"",
					statusName:'',
					remind_time:''
				},
				
				overlayStyle:{
					display:'none',
					marginBottom:'200rpx',
					bottom:'200rpx',
					position:'absolute'
				},
				
				taskFormLabel:{
					marginLeft:'30rpx',
					fontSize:'30rpx'
				},
				isShowStatus:false,
				
				isShowDateTime:false,
				
				isSubmit:false,
				
				start: Date.now() - 10 * 24 * 3600000,
				end: Date.now() + 10 * 24 * 3600000,
				
				start_time:'', //通话开始时间
				end_time:'', //通话结束时间
				currentPhoneNumber:'',//当前通话号码 

			};
		},
		computed: {
			...mapGetters(["userInfo","voiceServiceList"]),
			...mapState({
				callType: state => state.task.callType,
			})
		},
		components:{
			CallOrder
		},
		created() {
			that = this;
			console.log("orderself created");
			uni.$on("appendOrderList",this.handleAppendCallList);
		},
		methods: {
			eventScaleCallback(e) {
				this.baseFormData.statusName = e[0].label;
				this.baseFormData.order_status = e[0].value;
			},
			
			handleLoadMore(type){
				console.log("loadmore dddddddddd");
				
				let that = this;
				setTimeout(() => {
                    if(type == 'start'){
                        that.orderList = [];
                        that.currentPage = 2;
                    }else{
						if(that.currentPage == 1){
							that.currentPage = 2;
						}
					}
				    that.handleInitData(1);
					console.log("currentpage",that.currentPage);
				}, 500)
			},
            
            //更新订单列表
            changeOrderList(data){
                let order_list = that.orderList;
                
                order_list.forEach((item)=>{
                    if(item.id == data.id){
                        item.product_data = data.product_data;
                    }
                });
                
                that.orderList = order_list;
                
                // that.$forceUpdate();
            },
			
			//获取座席订单记录
			handleInitData(type){
				console.log("orderself hanldeinitdata",this.userInfo.id,this.userInfo.company_id,this.pageSize,this.currentPage);
				
				if((type == 0 && this.orderList.length == 0) || type == 1){
					//接口
					let params = this.baseFormData;
					params.seat = this.userInfo.seat;
					params.page = this.currentPage;
					params.limit = this.pageSize;
					
					getSeatCallOrderListPro(params).then(res=>{
						console.log("getSeatCallOrderListPro res",res);
						
						if(res.data.code == 0 && res.data.count > 0){
							if(this.currentPage == 0){
								this.orderList = res.data.data;
							}else{
								this.orderList = this.orderList.concat(res.data.data);
							}
							
							this.currentPage++;
						}
                        
                        uni.stopPullDownRefresh();
					}).catch(err=>{
						console.log("getSeatCallOrderListPro err",err);
                        
                        uni.stopPullDownRefresh();
					});
				}
			},
			
			//列表点击事件
			handleViewTask(data){
				//this.currentPhoneNumber = data.phone;
				
				console.log("taskform",this.taskForm);
				console.log("data",data);
				
				this.taskForm = data;
				
				this.isShowDetail = true;
			},
			
			//单选事件
			statusChange(e){
				console.log("statusChange e",e);
				
				console.log("orderlist start",this.orderList);
				
				// this.taskForm.status = e.detail.value;
				
				this.isShowDateTime = e.detail.value == 3 ? true:false;
				
				console.log("orderlist end",this.orderList);
			},
			
			changeRemindTime(e){
				console.log("changeRemindTime e",e);
				
				// this.taskForm.remind_time = e;
			},
			
			statusSelect(e) {
				console.log("e",e);
				// this.$refs.uForm.validateField('userInfo.sex')
				this.taskForm.statusName = e[0].label;
				this.taskForm.status = e[0].value;
			},
			
			//生成任务订单并保存
			handleSaveCallOrder(){
				let params = this.taskForm;
				let _this = this;
				
				params.company_id = this.userInfo.company_id;
				
				console.log("params",params);
				
				this.isSubmit = true;
			},
			
			//追加数据到顶部
			handleAppendCallList(a){
				console.log("aaaaaaaaaaaaaaaaaaaaaaaaaa",a,that.orderList);
				
				a.create_time = getTime();
				a.order_time = getTime();
				a.status = 0;

				let new_call_list = [a];
				
				new_call_list = new_call_list.concat(that.orderList);
				
				this.orderList = new_call_list;
			},
			
			closeCallOrder() {
				this.isShowDetail = false;
				
				this.taskForm = {};
			},
			
			//搜索
			handleSearchCallOrder() {
				this.currentPage = 0;
				
				this.handleInitData(1);
			},
			
			hideKeyboard() {
				uni.hideKeyboard()
			}
		},

		onLoad() {
			// this.openSQL();
			console.log("index onload");
		},
		onShow() {
			console.log("index onShow");
			// this.openSQL();
		},
		onLaunch() {
			console.log("index onLaunch");
		}
	};
</script>
<style lang="scss" scoped>
	
	page {
	    width: 100%;
	   
		
		background-color: #fff;
	}
	
	.label_text{
		font-size:30rpx;
		padding-right:10rpx;
		padding-left:10rpx;
	}
	
	.submitBtn {
		background: linear-gradient(90deg, #0066ff 0%, #1371ff 100%);
	}
	
	.container{
		width: 100%;
		color: #333333;
		background-image: linear-gradient(to bottom, #075AFF, #ffffff);
		background-size: 100% 45%;
		background-repeat: no-repeat;
		background-position: top center;
		// overflow:hidden;
		height:auto;
		margin-bottom:100rpx;
		background-color: #fff;
	}
	
	.call_search{
		width:100%;
		height:100rpx;

		background-color: #eee;
		
		border-bottom:#ececec 1px solid;
		
		position:fixed;
		top:150rpx;
		z-index:1000
	}
	
	.call_search_input{
		height:50rpx;
        background-color: #fff;
	}
	
	.call_log_list{
		width:100%;
		// height:auto;
		margin-top:260rpx;

		height:auto;
		float:left;
		clear:both;
		// position: absolute;
		margin-bottom:0rpx;
	}
	
	.call_log_item{
		width:100%;
		height:auto !important;
		float:left;
		clear:both;
		border-bottom:#ececec 1px solid;
		background-color:#fff;
	
	}
	
	.call_log_item_del{
		width:100%;
		height:auto !important;
		float:left;
		border-bottom:#ececec 1px solid;
		background-color: #ff0000 !important;
		
		animation: mymove 1s 1;
	}
	
	@keyframes mymove {
		0% {
			opacity: 1;
		}
		50% {
			opacity: 0.5;
		}
		100% {
			opacity: 0;
		}
	}
	
	.call_log_type{
		width:100rpx;
		height:158rpx;
		float:left;
	}
	
	.call_log_type .iconfont{
		font-size:35rpx;
		display: block;
		width:60rpx;
		height:60rpx;
		margin-left:20%;
		margin-top:45rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 30rpx;
	}
	
	.call_log_info{
		width:calc(100% - 200rpx);
		float:left;
		clear:both;
		height:auto !important;
		margin-top:20rpx;
		margin-left:20rpx;
	}
	
	.call_log_time{
		width:160rpx;
		margin-right:20rpx;
		font-size:30rpx;
		color:#3a3a3a;
		float:right;
		line-height:160rpx;
		height:160rpx;
		font-weight: bold;
		position: relative;
		text-align: right;
		// margin-top:-150rpx;
	}
	
	.phone_number{
		width:100%;
		font-size:32rpx;
		font-weight: 500;
		line-height: 70rpx;
	}
	
	.phone_time{
		color:#909090;
	}
	
	.tabs {
	    background-color: #ffffff;
	    
		width:100%;
		height:190rpx;
		top:0rpx;
		// margin-left:20rpx;
	    
		position: fixed;
		z-index: 1000;
		
	}
	
	.uni-tab-item-title {
	    color: #555;
	    font-size: 35rpx;
	    line-height: 60rpx;
	    flex-wrap: nowrap;
		margin-left:20rpx;
		margin-top:80rpx;
		
		float:left;
	    /* #ifndef APP-PLUS */
	    white-space: nowrap;
	    /* #endif */
	}
	
	.uni-tab-item-title-active {
		font-size:36rpx;
		font-weight: bold;
		border-bottom:3px #0b2eb0 solid;
	}
	
</style>